<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="include/base.jsp"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'contactnote.jsp' starting page</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  </head>
  
  <body class="body">
    <%@ include file="include/top.jsp" %>
    <div class="container" >
	  <div class="row">
		<div class="span3">
			<%@ include file="include/left.jsp" %>
		</div>
		<div class="span9">
			<ul class="breadcrumb" style="margin-bottom:0px;border-radius: 3px 3px 0 0">
				<li class="active">
					<a href="task.html"><i class="icon-user"></i>${contact.name }</a>
				</li>
			</ul>
			<div class="well">
			
				<div class="line">记录</div>
					
					<textarea class="span5" rows="3" id="content"></textarea>
					<br/>
					<button type="button" id="btn">发布</button>
					<input type="hidden" id = "cid" value="${contact.id }">
					<br/>
					<br/>
						<div id="newrecord">
							
						</div>
					<c:forEach items="${requestScope.list}" var="cn" varStatus="vs">
						
						<blockquote>
							${cn.content }<small>${employee.username}发布于 ${cn.createtime }</small>
						</blockquote>
					</c:forEach>
					<a href="contact.jspx">←返回联系人列表</a>
			</div>
			</div>
			</div>

		</div>
		<script type="text/javascript" src = "js/jquery.min.js"></script>
		<script type="text/template" id="template"	>
			<blockquote>
				{{content}}<small>{{username}}发布于 {{createtime}}</small>
			</blockquote>
		</script>
		
		<script type="text/javascript">
			$(function(){
				$("#btn").click(function(){
					 var cid = $("#cid").val();
					 var content = $("#content").val();
					
					 $.ajax({
						type:"post",
						url:"contactnote_release.jspx",
						data:"cid="+cid+"&content="+content,
						success:function(json){
							$("#content").val("");
							var username = json["e"].username;
							var content = json["cn"].content;
							var createtime = json["cn"].createtime;
							var template = $("#template").html();
							template = template.replace(/{{content}}/g,content).replace(/{{username}}/g,username).replace(/{{createtime}}/g,createtime);
							$("#newrecord").html(template+$("#newrecord").html());
						}
					});
				});
				
			});
		</script>
		
		
  </body>
</html>
